<template>
  <!-- 日常值班 -->
  <div class="wrapper">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/DutyIndex' }">值班管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/DailyPlanList' }">日常值班</el-breadcrumb-item>
        <el-breadcrumb-item>值班</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-row style="height: 95%;margin-top: 10px;" :gutter="15">
      <el-col :span="7" style="height: 100%;">
        <DutyLeft ref="DutyLeft" @cutFrom="cutFrom" @getDate="getDate" />
      </el-col>
      <el-col :span="17" style="height: 100%;padding-bottom: 30px;background-color: #fff;">
        <DutyRinght ref="DutyRinght" :leftTabsKey="leftTabsKey" :calendarDate="calendarDate" @leftGetData="leftGetData" />
      </el-col>
    </el-row>

  </div>
</template>

<script>
import DutyLeft from "./dutyLeft/idnex.vue";
import DutyRinght from "./dutyRinght/index.vue";
export default {
  name: "DailyDaily",
  components: {
    DutyLeft,
    DutyRinght
  },
  data() {
    return {
      leftTabsKey: "值班计划",
      calendarDate: new Date()
    };
  },
  watch: {

  },
  methods: {
    cutFrom(activeName) {
      this.leftTabsKey = activeName;
    },
    getDate(e, obj = {}) {
      this.calendarDate = e;
      this.$nextTick(() => {
        this.$refs.DutyRinght.getDetail(obj);
      });
    },
    leftGetData() {
      this.$refs.DutyLeft.getTableData();
    }
  }
};
</script>

<style lang='less' scoped>
.wrapper {
  height: 100%;
  :deep(.el-breadcrumb) {
    font-size: 16px;
  }
  .location-wrap {
    line-height: 25px;
  }
}
</style>
